<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.Vue监测数组改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue如何监测数组的改变？				
								通过包裹数组的变更方法实现，本质就是做了两件事：
								(1).调用原生对应的方法对数组进行更新。
								(2).重新解析模板，进而更新页面。
				备注：在Vue的世界里，修改数组一定要用如下方法：
									push()、pop()、shift()、unshift()、splice()、sort()、reverse()
		-->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>人员信息</h1>
			<ul>
				<li>姓名：{{name}}</li>
				<li>年龄：{{age}}</li>
				<li>爱好：{{hobby}}</li>
			</ul>
			<button @click="changeName">改名</button>
			<button @click="changeAge">改年龄</button>
			<button @click="changeFirstHobby">改第1个爱好</button>
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#demo',
			data:{
				name:'王帅',
				age:18,
				hobby:['抽烟','喝酒','烫头'],
				a:{b:{c:{d:9}}}
			},
			methods:{
				changeName(){
					this.name = '托尼'
				},
				changeAge(){
					this.age = 20
				},
				changeFirstHobby(){
					this.hobby.splice(0,1,'学习') //奏效
					// this.hobby[0] = '学习' //不奏效
				},
			}
		})
		console.log(vm)
	</script>
</html>